<template>
	<div>
		<show-view-path :parent-views="parentViews" :screenConfig="screenConfig" :chartConfig="chartConfig"  @selectView="selectView"></show-view-path>
		<div style="height: 100%" :ref="config.key"></div>
	</div>
</template>

<script>
/*
雷达图
 */
import ChartPublic from './chart-public.js';
import ChartStyle from './chart-style.js';

export default {
	name: "RadarView",
	mixins:[ChartPublic,ChartStyle],
	data() {
		return {
			chartType:"radar"
		}
	},
	methods: {
		setOption(){
			//图例组件
			var legend = [];
			//系列列表数据
			var seriesData = [];
			//指标
			var indicator=[];
			//静态数据模式
			if(this.config.dataSources.source=="static") {
				if (this.config.dataSources.staticData) {
					//静态数据
					let staticData = JSON.parse(this.config.dataSources.staticData);
					for (let i = 0; i < staticData.series.length; i++) {
						if(staticData.series[i].name){
							legend.push(staticData.series[i].name);
						}
					}
					indicator=staticData.indicator
					seriesData=staticData.series
				}
			}else {
				//未配置颜色图例
				if(this.config.dataSources.colorLegends.length==0){
					//获取度量
					for (var i = 0; i < this.config.dataSources.measures.length; i++) {
						var array=[];
						var measure = this.config.dataSources.measures[i];
						legend.push(measure.fieldLabel);
						for (var j = 0; j < this.data.length; j++) {
							var value= this.data[j][measure.tableName+'_'+measure.fieldName];
							if(value){
								array.push(value);
							}else {
								array.push(0);
							}
						}
						var obj={
							name: measure.fieldLabel,
							value:array
						}
						seriesData.push(obj);
					}
				}else {
					//图例组件配置
					var legendArr = [];
					//维度配置
					var xAxisArr = [];
					//获取维度
					this.getDimensions(xAxisArr);
					//根据颜色图例与度量获取图例组件
					for (let i = 0; i < this.config.dataSources.colorLegends.length; i++) {
						var colorLegend = this.config.dataSources.colorLegends[i];
						for (let j = 0; j < this.config.dataSources.measures.length; j++) {
							let measure = this.config.dataSources.measures[j];
							for (var k = 0; k < this.data.length; k++) {
								var colorValue =this.getColorValue(this.data[k],colorLegend,measure);
								var number = legend.indexOf(colorValue);
								if(number==-1){
									legend.push(colorValue);
									legendArr.push({
										key:measure.tableName+"_"+measure.fieldName,
										fieldName:colorLegend.tableName+'_'+colorLegend.fieldName,
										value:this.data[k][colorLegend.tableName+'_'+colorLegend.fieldName]
									})
								}
							}
						}
					}
					for (let i = 0; i < legendArr.length; i++) {
						var legendObj=legendArr[i];
						let array=[];
						for (let j = 0; j < xAxisArr.length; j++) {
							let val=0;
							for (let k = 0; k < this.data.length; k++) {
								var xAxisObj=xAxisArr[j];
								if(this.config.dataSources.dimensions.length>1){
									var xAxisKeys = xAxisObj.key.split("-");
									var xAxisVal="";
									for (var l = 0; l < xAxisKeys.length; l++) {
										if(l!=0){
											xAxisVal+="-";
										}
										var xVal = this.data[k][xAxisKeys[l]];
										//维度配置了字段渲染
										if(typeof(xVal)!='string'){
											xVal=xVal.oldValue;
										}
										xAxisVal+=xVal;
									}
									if(xAxisVal==xAxisObj.value && this.data[k][legendObj.fieldName]==legendObj.value ){
										val=this.data[k][legendObj.key];
										break;
									}
								}else {
									let xVal = this.data[k][xAxisObj.key];
									//维度配置了字段渲染
									if(typeof(xVal)!='string'){
										xVal=xVal.oldValue;
									}
									if(xVal==xAxisObj.value && this.data[k][legendObj.fieldName]==legendObj.value ){
										val=this.data[k][legendObj.key];
										break;
									}
								}

							}
							array.push(val)
						}
						let obj={
							name: legend[i],
							value:array
						}
						seriesData.push(obj);
					}
				}
				var indicatorMax=[];
				if(this.config.dataSources.dimensions){
					indicatorMax=this.config.dataSources.dimensions[0].indicatorMax || [];
				}
				for (let i = 0; i < this.dimensionVals.length; i++) {
					var max=1000;
					if(indicatorMax.length==1){
						max=indicatorMax[0].max || max;
					}else {
                        let name=this.dimensionVals[i] || "";
                        //配置了字段渲染
                        if(typeof(this.dimensionVals[i]) !="string" ){
                            name=this.dimensionVals[i].newValue;
                        }
                        let obj=indicatorMax.find(item=>item.label==name);
						if(obj && obj.max){
							max=obj.max;
						}
					}
					indicator.push({ name: name, max: max });
				}
			}
			let tooltip = this.chartTooltip()
			tooltip.trigger = 'item';
			//标签样式
			let label = {};
			label.show = this.config.styles.radarConfig.show;
			if(this.config.styles.radarConfig.show){
				label.fontSize = this.config.styles.radarConfig.fontSize;
				label.color = this.config.styles.radarConfig.fontColor;
				let formatter = '';
				if(this.config.styles.radarConfig.nameShow){
					formatter = '{b} '
				}
				if(this.config.styles.radarConfig.numericalShow){
					formatter = formatter+' {c}'
				}
				label.formatter=formatter
			}
			//
			let radius = this.config.styles.radarConfig.radius + this.config.styles.radarConfig.suffix;
			let center = this.config.styles.radarConfig.center.split(',');
			this.option={
				toolbox:this.chartToolbox(),//工具栏目配置
				tooltip:tooltip,//提示框的样式修改
				legend: this.chartLegend(legend,true),//图例
				color:this.getColors(),
				radar: {
					radius:radius,
					center:center,
					indicator: indicator,
					axisLine:this.config.styles.radarConfig.axisLine,
					splitLine:this.config.styles.radarConfig.splitLine,
					splitArea:this.config.styles.radarConfig.splitArea,
					splitNumber:this.config.styles.radarConfig.splitNumber
				},
				series: [
					{
						type: this.chartType,
						data: seriesData,
						label: label
					}
				]
			};
		}
	},
}
</script>

<style scoped>

</style>
